<template>

  <div id="main"  style="width:800px;height:550px;"  ></div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: 'consumersZjh',
    props:{
      chartData:{
        type:Array,
        default:() =>[]
      }
    },mounted() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      setTimeout(function () {

        option = {
          title:{
            style:{},
            text: '各区域商户入驻率'
          },
          legend: {
              /*right:6,*/
              bottom:2
          },
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2016', '2017', '2018', '2019', '2020'],
              ['华中地区', 56.5, 82.1, 88.7, 70.1, 53.4],
              ['华北地区', 51.1, 51.4, 55.1, 53.3, 73.8],
              ['华南地区', 40.1, 62.2, 69.5, 36.4, 45.2],
              ['华东地区', 25.2, 32.4, 41.2, 18, 33.9],
              ['东北地区', 28.3, 37.1, 58.3, 66, 42.8],
              ['西北地区', 34.2, 44.7, 27.3, 32.4, 25.7],
              ['西南地区', 17.7, 32.6, 22.5, 24, 44.2]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {gridIndex: 0},
          grid: {top: '15%'},
          series: [
            {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {
              type: 'pie',
              id: 'pie',
              radius: '10%',
              center: ['70%', '20%'],
              emphasis: {focus: 'data'},
              label: {
                formatter: '{b}: {@2021} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2021',
                tooltip: '2021'
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          var xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);

      });

      option && myChart.setOption(option);

    }
  }
</script>

<style></style>
